<template>
	<view class="page_box">
		<u-navbar
			id="navbarr"
			:is-back="true"
			title=" "
			v-if="1"
			:border-bottom="false"
			title-color="#fff"
			back-icon-color="#fff"
		></u-navbar>

		<view class="content_box">
			<view class="designer-content">
				<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/list.png" class="designer-bj"></image>
				<view class="designer-info" :style="{ top: navbar_height + 'px' }">
					<view class="flex justify-between align-center">
						<view class="flex align-center">
							<view class="user-avatar">
								<image
									class="img"
									src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png"
									mode="aspectFill"
								></image>
							</view>
							<view class="margin-left-sm">
								<view class="f34 text-white">玛卡巴卡</view>
								<view class="flex align-center margin-top-sm">
									<image
										src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_address_white.png"
										style="width: 18rpx;height: 26rpx;"
									></image>
									<text class="f24 text-white" style="margin-left: 10rpx;">四川省成都市</text>
								</view>
							</view>
						</view>
						<view class="tipc-btn">从业10年</view>
					</view>
					<view class="flex align-center margin-top">
						<view class="flex align-center">
							<text class="f36 text-bold text-white">121</text>
							<text class="f26 text-white" style="margin-left: 10rpx;">作品</text>
						</view>
						<view class="flex align-center" style="margin: 0 70rpx;">
							<text class="f36 text-bold text-white">121</text>
							<text class="f26 text-white" style="margin-left: 10rpx;">收藏</text>
						</view>
						<view class="flex align-center">
							<text class="f36 text-bold text-white">121</text>
							<text class="f26 text-white" style="margin-left: 10rpx;">赞</text>
						</view>
					</view>
					<view class="text-white f26 hidden-2" style="margin-top: 48rpx;line-height: 50rpx;">
						设计理念：用最棒的设计温暖每一个家庭用最棒的设计温暖每一个家庭
					</view>
				</view>
			</view>
			<view class="designer-detail">
				<view class="detail-item">
					<view class="title">服务信息</view>
					<view style="margin-top: 50rpx;">
						<view class="flex align-center margin-bottom-sm">
							<image
								src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_ys.png"
								style="width: 25rpx;height: 25rpx;"
							></image>
							<view class="f24" style="margin-left: 10rpx;">设计费：400-600m²</view>
						</view>
						<view class="flex align-center margin-bottom-sm">
							<image
								src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_fg.png"
								style="width: 27rpx;height: 25rpx;"
							></image>
							<view class="f24" style="margin-left: 10rpx;">擅长风格：中式 美式 田园 日式</view>
						</view>
						<view class="flex align-center margin-bottom-sm">
							<image
								src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_address_block.png"
								style="width: 20rpx;height: 25rpx;"
							></image>
							<view class="f24" style="margin-left: 10rpx;">服务范围：成都 乐山 德阳 绵阳 自贡</view>
						</view>
					</view>
					<view style="margin-top: 60rpx;">
						<view class="f28">荣誉</view>
						<view class="honr-list flex justify-between flex-wrap margin-top">
							<view class="honr-item hidden">2019年度青年设计专家</view>
							<view class="honr-item hidden">2019年度青年设计专家</view>
							<view class="honr-item hidden">2019年度青年设计专家</view>
						</view>
					</view>
				</view>
				<view class="detail-item">
					<view class="title">设计案例</view>
					<view v-for="(item, index) in decoration_list" :key="index" style="margin-top: 30rpx;">
						<view class="case-img" @click="urlBind">
							<image :src="item.img" mode="aspectFill" class="img"></image>
						</view>
						<view class="flex justify-between margin-top-sm">
							<view class="f32 hidden">{{ item.title }}</view>
							<view class="flex align-center" @click="Collection(index)">
								<i :class="item.iscollect ? 'cuIcon-likefill' : 'cuIcon-like'"></i>
								<text class="sc-text" style="margin-left: 10rpx;">{{ item.collectNum }}</text>
							</view>
						</view>
						<view class="flex align-center margin-top-sm">
							<view class="tipc-btn">{{ item.lbl }}</view>
							<view class="f24">{{ item.tips }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			navbar_height: 0,
			isunfold: false,
			decoration_list: [
				{
					img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/case.png',
					title: '现代简约低奢风小户型',
					lbl: '日式',
					tips: '3室·260m²|成都|6万',
					avatar: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png',
					iscollect: false,
					collectNum: 257
				},
				{
					img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/case.png',
					title: '现代简约低奢风小户型',
					lbl: '日式',
					tips: '3室·260m²|成都|6万',
					avatar: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png',
					iscollect: true,
					collectNum: 257
				}
			]
		};
	},
	onShow() {},
	onLoad(e) {},
	mounted() {
		const query = uni.createSelectorQuery().in(this);
		query
			.select('#navbarr')
			.boundingClientRect(data => {
				this.navbar_height = data.height;
			})
			.exec();
	},
	methods: {
		urlBind() {
			uni.navigateTo({
				url: './case_details'
			});
		},
		Collection(index) {
			this.decoration_list[index].iscollect = !this.decoration_list[index].iscollect;
			this.decoration_list[index].iscollect
				? (this.decoration_list[index].collectNum += 1)
				: (this.decoration_list[index].collectNum -= 1);
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/u-navbar {
	position: fixed;
	top: 0;
	transform: translateX(-50%);
	z-index: 99999;
	// background-color: transparent !important;
}
.content_box {
	.designer-content {
		position: relative;
		height: 616rpx;
		.designer-bj {
			position: absolute;
			width: 100%;
			height: 100%;
			opacity: 0.9;
		}
		.designer-info {
			padding: 0 30rpx;
			z-index: 1;
			position: relative;
			.user-avatar {
				width: 110rpx;
				height: 110rpx;
				border: 6rpx solid white;
				border-radius: 50%;
				overflow: hidden;
				.img {
					width: 100%;
					height: 100%;
				}
			}
			.tipc-btn {
				background: #ffcc00;
				border-radius: 25px;
				color: white;
				font-size: 26rpx;
				padding: 12rpx 22rpx;
			}
		}
	}
	.designer-detail {
		padding: 50rpx 30rpx 30rpx;
		border-radius: 30rpx 30rpx 0 0;
		background: #ffffff;
		position: relative;
		top: -100rpx;
		.detail-item {
			margin-bottom: 70rpx;
			.title {
				position: relative;
				color: #232323;
				font-size: 32rpx;
				font-weight: 700;
				z-index: 1;
				&::before {
					content: '';
					width: 140rpx;
					height: 8rpx;
					background: #ffcc00;
					border-radius: 6rpx;
					position: absolute;
					left: -6rpx;
					bottom: 4rpx;
					z-index: -1;
				}
			}
			.honr-list {
				.honr-item {
					padding: 10rpx 42rpx;
					background: #e6e6e6;
					border-radius: 22px;
					font-size: 24rpx;
					width: 48%;
					margin-bottom: 20rpx;
				}
			}
			.case-img {
				border-radius: 10rpx;
				width: 100%;
				height: 330rpx;
				overflow: hidden;
				.img {
					width: 100%;
					height: 100%;
				}
			}
			.cuIcon-likefill {
				color: red;
			}
			.tipc-btn {
				background: #ffb81e;
				border-radius: 6px;
				padding: 5rpx 18rpx;
				color: white;
				font-size: 22rpx;
				margin-right: 10rpx;
			}
		}
	}
}
</style>
